<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="root">
    <input placeholder="请输入" v-model="keyword">
    <ul>
        <li v-for="person in filPersons" :key="index">
            {{ person.name }}{{persons.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    // new Vue({
    //     el: '#root',
    //     data: {
    //         keyword:'',
    //         persons: [
    //             {id: 1, name: '马冬梅', age: 20},
    //             {id: 2, name: '周冬雨', age: 30},
    //             {id: 3, name: '周杰伦', age: 25},
    //             {id: 3, name: '温兆伦', age: 25},
    //         ],
    //         persons2: [],
    //     },
    //     watch:{
    //         keyword:{
    //             immediate:true,
    //              handler(value){
    //             this.persons2 = this.persons.filter((p)=>{
    //                 return p.name.indexOf(value)!== -1
    //             })
    //             }
    //         }
    //     }
    // })
    new Vue({
        el: '#root',
        data: {
            keyword:'',
            score: 0,
            persons: [
                {id: 1, name: '马冬梅', age: 20},
                {id: 2, name: '周冬雨', age: 30},
                {id: 3, name: '周杰伦', age: 25},
                {id: 3, name: '温兆伦', age: 25},
            ],
            persons2: [],
        },
        computed:{
           filPersons(){
               const  arr=this.persons.filter((p)=>{
                   return p.name.indexOf(this.keyword)!== -1;
               })
               //如果score为1，则按年龄排序
               switch(this.score){
                   case 0:
                       return arr;
                   case 1:
                       return arr.sort((a,b)=>{
                           return a.age-b.age;
                       });

                   case 2:
                       return arr.sort((a,b)=>{
                           return b.age-a.age;
                       })
               }
               return arr;
           }
        }
    })
</script>
</body>
</html>